<template>
  <div class="box" style="margin: 0px 10px;">
    <div class="content5-1" style="position: relative">
      <div class="title">
        病床监督态势图
        <span>单位:铺</span>


      </div>
      <div style="width:100%;height: 90%;margin: 20px;" ref="chart1"></div>
    </div>
    <div class="content5-2" style="position: relative">
      <div class="title">
        出院监督态势图
        <span>单位:人</span>
      </div>
      <div style="width:100%;height: 80%;margin: 20px;" ref="chart2"></div>
    </div>
  </div>
</template>
<script>
  import * as echarts from 'echarts'
  import 'echarts-liquidfill'

  import { listBedForStatus,listDischarge } from '@/api/system/charts'

  export default {
    name: 'Index',
    data() {
      return {
        chart2:null,
        chart1:null,
        listBedForStatusDTO_bedType:[],

        listBedForStatusDTO_occupied:[],
        listBedForStatusDTO_reserved:[],
        listBedForStatusDTO_vacant:[],


        yearList: [],
        relevanceList: [],
        relevanceBeforeList: [],
      }
    },


    created() {
      this.getBedForStatus()
      this.getDischarge()
    },

    methods: {
      initChart1() {
        this.chart1 = echarts.init(this.$refs.chart1, 'macarons')
        this.chart1.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
            textStyle: {  // 设置悬浮窗文字样式
              fontSize: 24  // 悬浮窗文字大小
            }
          },
          grid: {
            left: '1%',
            right: '1%',
            bottom: '2%',
            top: '25%',
            containLabel: true
          },
          legend: {
            data: ['空闲', '预约', '占用'],
            top: 60,
            textStyle: {
              color: '#fff',
              fontSize: 38
            },
            itemWidth: 40,
            itemHeight: 40
          },
          xAxis: {
            type: 'category',
            data: this.listBedForStatusDTO_bedType,
            axisLine: {
              lineStyle: {
                color: '#365E8E'

              },
              textStyle: {
                fontSize: 14
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                fontFamily: 'Microsoft YaHei',
                color: '#fff',
                fontSize: 26
              },
              splitArea: {
                show: false
              },
              interval: 0  // 或者 interval: 1
            }
          },

          yAxis: {
            type: 'value',
            axisLine: {
              show: false,
              lineStyle: {
                color: '#365E8E'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                fontSize:30,
                color: '#fff'
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#365E8E'
              }
            },
            splitArea: {
              show: false
            }
          },
          series: [
            {
              name: '空闲',
              type: 'bar',
              barWidth: '15',
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#6483F2'
                  }, {
                    offset: 1,
                    color: 'rgba(101, 133, 244, 0)'
                  }]),
                  barBorderRadius: 12
                }
              },
              data: this.listBedForStatusDTO_vacant
            },
            {
              name: '占用',
              type: 'bar',
              barWidth: '15',
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#05E2EE'
                  }, {
                    offset: 1,
                    color: 'rgba(5, 226, 238, 0)'
                  }]),
                  barBorderRadius: 11
                }

              },
              data: this.listBedForStatusDTO_occupied

            },
            {
              name: '预约',
              type: 'bar',
              barWidth: '15',
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#80ff64'
                  }, {
                    offset: 1,
                    color: 'rgba(255, 100, 105, 0)'
                  }]),
                  barBorderRadius: 11
                }
              },
              data: this.listBedForStatusDTO_reserved

            },
            ]
        })
      },
      initChart2() {
        this.chart2 = echarts.init(this.$refs.chart2, 'macarons')
        this.chart2.setOption({
          tooltip: {
            trigger: 'axis',
            textStyle: {
              fontSize: '28',
            },
          },
          legend: {
            textStyle: {
              color: '#fff',
              fontSize: 24
            },
            data: this.yearList
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              axisLabel: {
                fontSize: 24
              },
              axisLine: {
                lineStyle: {
                  color: '#fff'
                }
              },
              type: 'category',
              data: [
                '1月',
                '2月',
                '3月',
                '4月',
                '5月',
                '6月',
                '7月',
                '8月',
                '9月',
                '10月',
                '11月',
                '12月'
              ]
            }
          ],
          yAxis: [
            {
              axisTick: {
                show: true,    // 是否显⽰坐标轴刻度
                inside: true,     // 坐标轴刻度是否朝内，默认朝外
                length: 5,    // 坐标轴刻度的长度
                lineStyle: {
                  color: '#FFF',     // 刻度线的颜⾊
                  width: 10,    // 坐标轴刻度线宽
                  type: 'solid',     // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
                },
              },
              axisLabel: {
                fontSize: 24
              },
              splitLine: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: '#fff'
                }
              },
              type: 'value'
            }
          ],
          series: [
            {
              name: this.yearList[1],
              type: 'line',
              smooth: true,
              itemStyle: {
                normal: {
                  color: 'rgba(4, 247, 198, 1)',
                  lineStyle: {
                    color: 'rgba(4, 247, 198, 1)'
                  }
                }
              },
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 1,
                      color: 'rgba(9, 31, 88, 1)' // 0% 处的颜色
                    },
                    {
                      offset: 0,
                      color: 'rgba(4, 247, 198, 1)' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }
              },
              emphasis: {
                focus: 'series'
              },
              data: this.relevanceBeforeList
            },
            {
              name: this.yearList[0],
              type: 'line',
              smooth: true,
              itemStyle: {
                normal: {
                  color: 'rgba(11, 194, 253, 1)',
                  lineStyle: {
                    color: 'rgba(11, 194, 253, 1)'
                  }
                }
              },
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 1,
                      color: 'rgba(9, 31, 88, 1)' // 0% 处的颜色
                    },
                    {
                      offset: 0,
                      color: 'rgba(11, 194, 253, 1)' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }
              },
              emphasis: {
                focus: 'series'
              },
              data: this.relevanceList
            }
          ]
        })
      },

      /** 查询床位数量列表 */
      getBedForStatus() {
        listBedForStatus().then(response => {
          for (let i = 0; i < response.data.length; i++) {
            this.listBedForStatusDTO_bedType[i] = response.data[i].bedType
            this.listBedForStatusDTO_occupied[i] = response.data[i].occupied
            this.listBedForStatusDTO_reserved[i] = response.data[i].reserved
            this.listBedForStatusDTO_vacant[i] = response.data[i].vacant
          }
          this.initChart1()
        })
      },
      getDischarge() {
        listDischarge().then(response => {
          const date = new Date()
          let year = date.getFullYear()
          this.yearList.push(year + '年度')
          this.yearList.push(year - 1 + '年度')
          for (let i = 0; i < 12; i++) {
            this.relevanceBeforeList[i] = response.data[i].dischargedPatients
          }
          for (let i = 0; i < 12; i++) {
            this.relevanceList[i] = response.data[i+12].dischargedPatients
          }
          this.initChart2()
        })
      },
    }
  }
</script>
<style scoped lang="scss">
  .home {
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 10px;
    color: #676a6c;
    overflow-x: hidden;

    ul {
      list-style-type: none;
    }

    h4 {
      margin-top: 0px;
    }

    h2 {
      margin-top: 6px;
      font-size: 18px;
      font-weight: 100;
    }

    p {
      margin-top: 6px;

      b {
        font-weight: 700;
      }
    }

    .update-log {
      ol {
        display: block;
        list-style-type: decimal;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 20px;
      }
    }

    .list-pop-content table tr {
      font-size: 30px;
      color: white;
      line-height: 45px;
      text-align: center;
    }

    .box5 {
      width: 1635px;
      height: 1800px;

    }

    .el-table .cell {
      box-sizing: border-box;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
      word-break: break-all;
      line-height: 23px;
      font-size: 18px;
      padding-left: 10px;
      padding-right: 10px;
    }



    .title {
      width: 386px;
      height: 50px;
      font-size: 28px;
      text-align: left;
      line-height: 60px;
      color: white;
      margin-left: 25px;
      margin-top: 10px;
    }

    .title span {
      font-size: 18px;
      margin-left: 15px;
      color: #a5a5a5;
    }

    .title-title {
      position: absolute;
      right: 60px;
      top: 30px;
      height: 30px;
    }

    .content5-1 {
      width: 1635px;
      height: 989px;
      background: url('../../assets/xiehospital/bj  3.png') no-repeat;
      background-size: 1635px 989px;
      border-radius: 6px;
      margin-top: 20px;
      padding: 4px 1px;
      overflow: hidden;
    }

    .content5-2 {
      width: 1635px;
      height: 600px;
      background: url('../../assets/xiehospital/bj  3.png') no-repeat;
      background-size: 1635px 600px;
      border-radius: 6px;
      margin-top: 20px;
      padding: 4px 1px;
      overflow: hidden;
    }


    table {
      border-spacing: 0px;
      width: 100%;
    }

    .table-title {
      width: 612px;
      height: 42px;
      background: #1F376B;
      border-radius: 4px;
    }

    .box5 .table-title th {
      text-align: center;
      color: #2E9BEC;
      margin-left: -2px;
      font-size: 24px;
      height: 45px;
      border: 1px #4f7cc2 solid;
    }


  }
</style>
